<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Search</title>
</head>
<body>
	<h1>Search assistant</h1>
	<hr/>
	<form> 
		Input：<input type="text" id="txt1" onkeyup="showHint(this.value)" name="q"/>
	</form>
	<div id="hint" style="margin-left:55px" ></div>
	<script type="text/javascript">
	// 不使用闭包，直接调用function
		function showHint(str){
			document.getElementById("hint").innerHTML="";
			var xhr=new XMLHttpRequest();
			if (str.length==0){
  				return;
  			}
			xhr.open("GET","http://localhost:9090/Homework_W5Tues/query?q="+str,true);
			xhr.send();
			xhr.onreadystatechange=function(){
  				if (xhr.readyState==4 && xhr.status==200){
  					var response=JSON.parse(xhr.responseText);
  					response.forEach((item)=>{
  						var p=document.createElement("p");
  						var text = document.createTextNode(item);
  						p.appendChild(text);
  						document.getElementById("hint").appendChild(p);
  					});   			
    			}
  			}
			
			
		}
	</script>
</body>
</html>